Skip to main content

22.03.07 - HTML & CSS

HTML​

HTML - Page description language. Contains both formatting instructions(tags) and content

Static HTML - Web page is a file on a server Dynamic HTML- Web pages consist of HTML that is generated by software (PHP). Software can communicate with databases

Client-Server Paradigm​

  • A server provides specific services
  • Server application waits passively for contacts from clients
  • Clients initiate contacts/server responds
  • Information can flow in both directions

Other Web Technologies​

CSS - fine control for the user interface PHP - Data driven websites JavaScript (JS) - User Interaction DOM - allows identification of elements of web sites

URL​

URL - Uniform Resource Locator scheme://prefix.domain:port/path/filename

  • scheme - defines the type of internet service
  • Prefix - defines a domain prefix
  • domain - registered internet domain
  • port - port number of the server
  • path - where the file is on the server
  • filename - the name of the document

Tags​

  • Tags are instructions to the browser
  • They have structural meaning - they (mostly) don't control the user interface.
  • The appearance of tags is controlled by CSS, the Browser and NB with HTML 5
  • A tag together with its content is called an element
  • Attributes appear between the name and the right bracket of the opening tag

Attributes - Optionally a start tag may include one or more attributes. Additional information about the element

Empty Elements - Elements with no content are called empty elements eg <br> and <hr>

<head> - Various useful things put inside this <body> - Content of the page. Structural Information

Tables​

<table> - Starts table <th> - Table Heading/Column <tr> - Table row <td> - Table data

Lists​

<ul> - Unordered List <ol> - Ordered List <li> - List Item

CSS​

CSS = Cascading Style Sheets Mechanism to control and change the presentation of HTML documents Separate presentation from content

Levels of CSS​

  • External Style Sheet: Specify the appearance of a single tag
  • External Style Sheets: Apply to the document in which they appear
  • External Style Sheets: Apply to any number of documents

External style sheets are written with the MIME type text/css

  • <div> and <span> do nothing on their own. Designed as containers to attach CSS to.
  • <div> - blocks of content
  • <span> - inline content

DOM​

DOM = Document Object Model

  • Essential for Dynamic HTML
  • Allow scripts to identify and change elements of a webpage. Webpages are represented as a hierarchy
  • Elements of documents are represented as objects that have methods
  • HTML id attribute is used to identify unique elements

Actions and Values​

  • DOM objects are specific instances of a tag
  • Need to have a unique id to be addressable
  • DOM values are the content of tags
  • DOM methods are actions that you can perform on HTML elements